<script>
    import { createEventDispatcher, onMount } from 'svelte'
    export let injClass = '';
	// 单元格所占列数
	// Number of columns occupied by the cell
	export let col = '1';

	// 单元格所占行数
	// Number of rows occupied by the cell
	export let row = '1';

	// 根据行数生成样式
	// Generate styles based on the number of rows
	const rowObj = {
		'1': 'row-span-1',
		'2': 'row-span-2',
		'3': 'row-span-3',
		'4': 'row-span-4',
		'5': 'row-span-5',
		'6': 'row-span-6',
	};

	// 根据列数生成样式
	// Generate styles based on the number of columns
	const colObj = {
		'1': ' col-span-1',
		'2': ' col-span-2',
		'3': ' col-span-3',
		'4': ' col-span-4',
		'5': ' col-span-5',
		'6': ' col-span-6',
		'7': ' col-span-7',
		'8': ' col-span-8',
		'9': ' col-span-9',
		'10': ' cols-span-10',
		'11': ' cols-span-11',
		'12': ' cols-span-12',
	};
</script>

<div draggable={true} role="none" class={`${rowObj[row] || rowObj['1']}${colObj[col] || colObj['1']} ${injClass}`}><slot /></div>
